<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>地铁规划</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			*{margin:0;border:0;padding:0;}
			body{width:100%;max-width:720px;margin:auto;}
			img{max-width: 100%;display:block;}
			#big_info{display:none;width:300%;max-width:300%;position:absolute;top:0;left:0;}
			#close{display:none;width:300%;position:fixed;z-index:100;top:0px;left:0px;padding:10px;font-weight:700;}
		</style>
	</head>
	<body>
		<img src="images/dtgh_01.png"/>
		<img id="big_img" src="images/dtgh_02.png"/>
		<img src="images/dtgh_03.png"/>
		<img id="big_info" src="images/big_img.jpg" alt="规划大图" />
		<div id="close">点击关闭</div>
	</body>
	<script>
		var close = document.getElementById('close');
		var big_info = document.getElementById('big_info');
		var big_img = document.getElementById('big_img');
		close.onclick = function(){big_info.style.display = close.style.display = "none";};
		big_img.onclick = function(){big_info.style.display = close.style.display = "block";};
	</script>
</html>